import {Image, StyleSheet, View, Text, TouchableOpacity, TextInput, ScrollView, Modal} from 'react-native';
import {Stack, useLocalSearchParams, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { Ionicons } from '@expo/vector-icons';
import {useEffect, useState} from "react";
import addIcon from "@/assets/images/releaseImg/addIcon.png"
import addTagGroupIcon from "@/assets/images/releaseImg/addTagGroupIcon.png"
import * as React from "react";
import PupoModal from "@/components/pupoModal"
import {showToast} from "@/utils/rootToast";
import {postApplyGroupByRequest, getGroupDetailByRequest} from "@/services/registerCommumity";
import {loadingService} from "@/utils/loadingServer";

export default function registerGroupScreen() {

    const router = useRouter();
    const routerParms = useLocalSearchParams();

    const [cancelConcern, setCancelConcern] = useState(false);
    const [tagList, setTagList] = useState([]);
    const [tagText, setTagText] = useState("");
    const [uploadData, setUploadData] = useState({});
    const [introduction, setIntroduction] = useState("");

    const onCancelModal = function () {
        const tmpTagList = tagList;
        tmpTagList.push(tagText);
        setTagText("");
        setTagList(tmpTagList)
        setCancelConcern(false);
    };

    useEffect(() => {
        console.log('routerParms.activityId', routerParms.groupId);
    }, []);

    const onTagInput = function (text: string) {
        setTagText(text)
    };

    const onKeyChange = function (key, val) {
        const tmpObj = {
            ...uploadData,
            [key]: val,
        };
        setUploadData(tmpObj);
    };

    const submitData = function () {
        if (!introduction) {
            return showToast("你输入社群介绍")
        };

        if (!uploadData['我的能力']) {
            return showToast("请填写我的能力")
        };

        if (!uploadData['我的资源']) {
            return showToast("请填写我的资源")
        };

        if (!uploadData['我需要什么']) {
            return showToast("请填写我需要什么")
        };

        if (!uploadData['我关注什么']) {
            return showToast("请填写我关注什么")
        };

        if (tagList.length <= 0) {
            return showToast("请增加个人标签")
        };

        if (!uploadData['微信、联系方式']) {
            return showToast("请填写微信、联系方式")
        };

        if (!uploadData['常驻地']) {
            return showToast("请填写常驻地")
        };

        const data = {
            communityId: routerParms.groupId,
            introduction,
            wechat: uploadData['微信、联系方式'],
            residence: uploadData['常驻地'],
            cards: [
                {
                    "cardTitle": "标签",
                    "cardContent": JSON.stringify(tagList.join(",")),
                    "order": 5
                },
                {
                    "cardTitle": "我的能力",
                    "cardContent": uploadData['我的能力'],
                    "order": 4
                },
                {
                    "cardTitle": "我的资源",
                    "cardContent": uploadData['我的资源'],
                    "order": 3
                },
                {
                    "cardTitle": "我关注什么",
                    "cardContent": uploadData['我关注什么'],
                    "order": 2
                },
                {
                    "cardTitle": "我需要什么",
                    "cardContent": uploadData['我需要什么'],
                    "order": 1
                },
            ],
        };
        console.log('data', data);
        loadingService.show("提交申请...");
        postApplyGroupByRequest(data)
            .then(res => {
                loadingService.hide();
                showToast("申请成功!")
                router.back();
                console.log('res', res);
            })
            .catch(err => {
                console.log('err', err);
                loadingService.hide();
            })

    };

    const activeBtn = function () {
        if (
            introduction &&
            uploadData['我的能力'] &&
            uploadData['我的资源'] &&
            uploadData['我需要什么'] &&
            uploadData['我关注什么'] &&
            tagList.length > 0 &&
            uploadData['微信、联系方式'] &&
            uploadData['常驻地']
        ) {
            return true;
        } else {
            return false;
        };
    };

    return (
        <View style={{ height: "100%", backgroundColor: "#FFF" }}>
            <Stack.Screen
                options={{
                    title: '申请加入', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#FFF', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <View style={{ flex: 1, }}>
                <View style={styles.registerGroupContainer}>
                    <View style={styles.registerInputTextWrap}>
                        <View style={styles.resisterInputTextItem}>
                            <View>
                                <Text>基本介绍</Text>
                            </View>
                            <View style={styles.resisterInputTextItemText}>
                                <TextInput
                                    multiline={true}
                                    placeholder='请输入社群介绍'
                                    style={{ width: "100%", fontSize: 12, height: "100%" }}
                                    onChangeText={(str: string) => setIntroduction(str)}
                                />
                            </View>
                        </View>
                    </View>
                    <View style={styles.registerContent}>
                        <View style={styles.registerItem}>
                            <Text style={styles.inpTitle}>我的能力</Text>
                            <TextInput placeholder="请输入" onChangeText={(val) => onKeyChange('我的能力', val) } />
                        </View>
                        <View style={styles.registerItem}>
                            <Text style={styles.inpTitle}>我的资源</Text>
                            <TextInput placeholder="请输入" onChangeText={(val) => onKeyChange('我的资源', val) }/>
                        </View>
                        <View style={styles.registerItem}>
                            <Text style={styles.inpTitle}>我需要什么</Text>
                            <TextInput placeholder="请输入" onChangeText={(val) => onKeyChange('我需要什么', val) } />
                        </View>
                        <View style={styles.registerItem}>
                            <Text style={styles.inpTitle}>我关注什么</Text>
                            <TextInput placeholder="请输入" onChangeText={(val) => onKeyChange('我关注什么', val) } />
                        </View>
                        <View style={styles.registerItemContainer}>
                            <View style={styles.registerTagWrap}>
                                <Text>我的标签<Text style={styles.tagText}>(最多3个标签，每个8个字以内)</Text></Text>
                                {
                                    tagList?.length < 3 && (
                                        <TouchableOpacity onPress={() => setCancelConcern(true)}>
                                            <View style={{ width: 19, height: 19 }}>
                                                <Image source={addTagGroupIcon} style={{ width: "100%", height: "100%" }}/>
                                            </View>
                                        </TouchableOpacity>
                                    )
                                }
                            </View>
                            <View style={styles.tagList}>
                                {
                                    tagList?.map((item: any, index: number) => {
                                        return (
                                            <View style={styles.tagListItem} key={index}>
                                                <Text style={styles.tagListItemText}>{ item }</Text>
                                            </View>
                                        )
                                    })
                                }
                            </View>
                        </View>
                        <View style={styles.registerItem}>
                            <Text style={styles.inpTitle}>微信、联系方式</Text>
                            <TextInput placeholder="请输入" onChangeText={(val) => onKeyChange('微信、联系方式', val) } />
                        </View>
                        <View style={styles.registerItem}>
                            <Text style={styles.inpTitle}>常驻地</Text>
                            <TextInput placeholder="请输入" onChangeText={(val) => onKeyChange('常驻地', val) }/>
                        </View>
                    </View>

                </View>
            </View>
            {
                activeBtn() && (
                    <TouchableOpacity onPress={submitData}>
                        <View style={styles.footerBtnWrapActive}>
                            <View style={styles.footerBtnActive}>
                                <Text style={styles.footerBtnTextActive}>申请加入</Text>
                            </View>
                        </View>
                    </TouchableOpacity>
                )
            }

            {
                !activeBtn() && (
                    <TouchableOpacity onPress={submitData}>
                        <View style={styles.footerBtnWrap}>
                            <View style={styles.footerBtn}>
                                <Text style={styles.footerBtnText}>申请加入</Text>
                            </View>
                        </View>
                    </TouchableOpacity>
                )
            }

            {/*<Modal*/}
            {/*    animationType="fade"*/}
            {/*    transparent={true}*/}
            {/*    visible={cancelConcern}*/}
            {/*>*/}
            {/*    <TouchableOpacity*/}
            {/*        style={styles.cancelCenteredView}*/}
            {/*        onPress={() => setCancelConcern(false)}*/}
            {/*        activeOpacity={1}*/}
            {/*    >*/}
            {/*        <View style={styles.cancelfollowContainer}>*/}
            {/*            <View>*/}
            {/*                <Text style={styles.followTitle}>取消关注</Text>*/}
            {/*            </View>*/}
            {/*            <View>*/}
            {/*                <Text style={styles.followCotent}>确定取消关注?</Text>*/}
            {/*            </View>*/}
            {/*            <View style={styles.footerContainer}>*/}
            {/*                <TouchableOpacity onPress={() => setCancelConcern(false)}>*/}
            {/*                    <View style={[styles.footerBtns, styles.footerCancel]}>*/}
            {/*                        <Text style={{ color: "#2A2B30" }}>取消</Text>*/}
            {/*                    </View>*/}
            {/*                </TouchableOpacity>*/}
            {/*                <TouchableOpacity onPress={() => setCancelConcern(false)}>*/}
            {/*                    <View style={[styles.footerBtns, styles.footerOk]}>*/}
            {/*                        <Text style={{ color: "#fff" }}>确定</Text>*/}
            {/*                    </View>*/}
            {/*                </TouchableOpacity>*/}
            {/*            </View>*/}
            {/*        </View>*/}
            {/*    </TouchableOpacity>*/}
            {/*</Modal>*/}

            <PupoModal
                title={'个人标签'}
                onOk={onCancelModal}
                visible={cancelConcern}
                okCancel={() => {
                    setTagText("");
                    setCancelConcern(false);
                }}
            >
                <View style={styles.singleTagContainer}>
                    <TextInput placeholder="例:桌游达人" style={{ width: "100%" }} onChangeText={onTagInput} value={tagText}/>
                </View>
            </PupoModal>
        </View>

    );
}

const styles = StyleSheet.create({
    registerGroupContainer: {
        padding: 12,
    },
    registerGroupInfo: {
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: "#fff",
        paddingVertical: 8,
        paddingHorizontal: 12,
        borderRadius: 10,
    },
    avatorGroup: {
        width: 48,
        height: 48,
        backgroundColor: "#F7F8F9",
        borderRadius: 50,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    addIcon: {
        width: 14,
        height: 14,
    },
    registerHeaderSetting: {
        flexDirection: "row",
        alignItems: "center",
    },
    settingTitle: {
        color: "#9C9EAC"
    },
    registerContent: {
        backgroundColor:"#fff",
        paddingHorizontal: 12,
        // marginTop: 12,
        borderRadius: 10,
    },
    registerItem: {
        // flexDirection: "row",
        // justifyContent: "space-between",
        borderBottomWidth: 0.3,
        borderBottomColor: "#E4E6EC",
        paddingVertical: 12,
    },
    registerItemContainer: {
        borderBottomWidth: 0.3,
        borderBottomColor: "#E4E6EC",
        paddingVertical: 12,
    },
    registerInputTextWrap: {
        backgroundColor: "#fff",
        borderRadius: 10,
        padding: 12,
        marginTop: 10,
    },
    resisterInputTextItem: {
        // marginBottom: 24,
    },
    resisterInputTextItemText: {
        backgroundColor: "#F7F8F9",
        height: 100,
        paddingHorizontal: 12,
        paddingVertical: 6,
        borderRadius: 6,
        marginTop: 10,
    },
    footerBtnWrap: {
        backgroundColor: "#fff",
        flexDirection: "row",
        justifyContent: "center",
        paddingTop: 12,
        paddingBottom: 23,
    },
    footerBtn: {
        width: scaleSize(351),
        height: 38,
        backgroundColor: "#E4E6EC",
        borderRadius: 19,
        flexDirection: "row",
        justifyContent: 'center',
        alignItems: "center"
    },
    footerBtnText: {
        color: "#fff",
    },
    footerBtnWrapActive: {
        backgroundColor: "#fff",
        flexDirection: "row",
        justifyContent: "center",
        paddingTop: 12,
        paddingBottom: 23,
    },
    footerBtnActive: {
        width: scaleSize(351),
        height: 38,
        backgroundColor: "#EC6138",
        borderRadius: 19,
        flexDirection: "row",
        justifyContent: 'center',
        alignItems: "center"
    },
    footerBtnTextActive: {
        color: "#fff",
    },
    groupImage: {
        width: 82,
        height: 82,
        backgroundColor: "#F7F8F9",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        marginTop: 10,
    },
    tagText: {
        color: "#9C9EAC",
        fontSize: 12,
    },
    registerTagWrap: {
        flexDirection: "row",
        justifyContent: "space-between"
    },
    tagList: {
        flexDirection: "row",
        marginTop: 10,
    },
    tagListItem: {
        backgroundColor: 'rgba(255,70,0,0.1)',
        borderRadius: 8,
        paddingVertical: 2,
        paddingHorizontal: 6,
        marginRight: 10,
    },
    tagListItemText: {
        fontSize: 10,
        color: "#FB5313"
    },
    inpTitle: {
        marginBottom: 4,
    },
    singleTagContainer: {
        width: "100%",
        height: 36,
        backgroundColor: "#F7F8F9",
        borderRadius: 17,
        flexDirection: "row",
        alignItems: "center",
        paddingLeft: 12,
        marginTop: 14,
        marginBottom: 24,
    }
});
